<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的扩展</title>
</head>

<body>
    <script>
        // 扩展运算符，将一个数组扩展成逗号隔开的参数序列，好比rest 参数的你运算符
        console.log(...[1, 5, 6, 3])
        console.log(1, ...[3, 4, 5], 9)

        //该运算符主要用于函数调用

        //替代函数apply 方法
        // ES5的 写法
        // var arr1 = [0, 1, 2];
        // var arr2 = [3, 4, 5];
        // Array.prototype.push.apply(arr1, arr2);

        // ES6 的写法
        // let arr1 = [0, 1, 2];
        // let arr2 = [3, 4, 5];
        // arr1.push(...arr2);

        //扩展运算符的应用
        // 1、复制数组
        // ES5
        // const a1 = [1, 2];
        // const a2 = a1.concat();

        // a2[0] = 2;
        // a1 // [1, 2]

        // // ES6
        // const a1 = [1, 2];
        // // 写法一
        // const a2 = [...a1];
        // // 写法二
        // const [...a2] = a1;

        // 2、合并数组
        // const arr1 = ['a', 'b'];
        // const arr2 = ['c'];
        // const arr3 = ['d', 'e'];

        // // ES5 的合并数组
        // arr1.concat(arr2, arr3);
        // // [ 'a', 'b', 'c', 'd', 'e' ]

        // // ES6 的合并数组
        // const arr4 = [...arr1, ...arr2, ...arr3]
        // // [ 'a', 'b', 'c', 'd', 'e' ]
        // arr4[2] = 4
        // // 以上虽然实现了复制 但是是浅拷贝，有对象的情况下 对象的地址是一个的
        // const a1 = [{
        //     foo: 1
        // }];
        // const a2 = [{
        //     bar: 2
        // }];

        // const a3 = a1.concat(a2);
        // const a4 = [...a1, ...a2]
        // a4[0].foo = 5

        // 3、与解构赋值结合
        // const [first, ...rest] = [1, 2, 3, 4, 5];
        // first // 1
        // rest // [2, 3, 4, 5]

        // const [first, ...rest] = [];
        // first // undefined
        // rest // []

        // const [first, ...rest] = ["foo"];
        // first // "foo"
        // rest // []

        //）字符串 扩展运算符可以将字符串转化成真正的数组

        //实现了 Iterator 接口的对象
        // 任何定义了遍历器接口的对象，都可以运用扩展运算符转换为真正的数组
        // let nodeList = document.querySelectorAll('div');
        // let array = [...nodeList];
        // nodeList 是一个类似数组的对象，使用扩展运算符后便可转换成真正的数组了

        // （6）Map 和 Set 结构，Generator 函数
        // 扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。
    </script>
</body>

</html>